<template>
  <div class="header">
    <el-radio-group v-model="radioType" @change="searchFun">
      <el-radio value="1" size="large" border style="margin-right: 10px"
        >按学科查</el-radio
      >
      <el-radio value="2" size="large" border>按院校查</el-radio>
    </el-radio-group>

    <el-select
      v-model="extType"
      placeholder="Select"
      size="large"
      style="width: 120px; margin: 0 20px"
      @change="searchFun"
    >
      <el-option
        v-for="item in extTypeArr"
        :key="item.extTypeId"
        :label="item.label"
        :value="item.extTypeId"
      />
    </el-select>
    <div v-show="radioTypeComputed">
      <el-autocomplete
        v-model="searchValMajor"
        clearable
        size="large"
        :fetch-suggestions="searchKeyInputMajor"
        placeholder="请输入学科名称"
        @select="onClickSearchItemMajor"
        value-key="name"
        style="width: 240px"
      >
        <template #prefix>
          <el-icon class="el-input__icon">
            <search />
          </el-icon>
        </template>
      </el-autocomplete>
    </div>
    <div v-show="!radioTypeComputed">
      <el-autocomplete
        size="large"
        v-model="searchValCollege"
        clearable
        :fetch-suggestions="searchKeyInputCollege"
        placeholder="请输入院校名称"
        @select="onClickSearchItemCollege"
        value-key="cnName"
        style="width: 240px"
      >
        <template #prefix>
          <el-icon class="el-input__icon">
            <search />
          </el-icon>
        </template>
      </el-autocomplete>
    </div>
    <el-button type="primary" size="large" @click="searchFun">搜索</el-button>
  </div>
  <div class="body">
    <!-- 学科搜索 -->
    <div v-show="radioTypeComputed" class="subjectClass">
      <subjectTree
        :parentFun="parentFun"
        :currentNodeKey="currentNodeKey"
      ></subjectTree>
      <div class="tableClass">
        <el-table
          :data="subjectData"
          stripe
          style="width: 100%; margin-bottom: 15px"
        >
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column prop="collegeName" label="院校名称">
            <template #default="scope">
              <div>
                {{ scope.row.collegeName }}({{ scope.row.address[0].address }})
              </div>
              <div class="features">
                <span
                  v-for="(item, index) in scope.row.features"
                  :key="index"
                  >{{ item }}</span
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="level" label="学科评估" width="120" />
        </el-table>
        <div class="right">
          <el-pagination
            v-model:current-page="paramSubject.page"
            :default-page-size="paramSubject.pageSize"
            :total="totalSubject"
            @current-change="getSubjectList"
          />
        </div>
      </div>
    </div>
    <!-- 院校搜索 -->
    <div v-show="!radioTypeComputed">
      <div v-for="item in collegeData" :key="item.id" class="college">
        <div class="collegeName">
          {{ item.collegeName }}({{ item.totalCount }}个)
        </div>
        <el-table :data="item.subjectEvaluates" stripe style="width: 100%">
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column prop="name" label="学科名称" />
          <el-table-column prop="level" label="学科评估" width="120" />
          <el-table-column prop="majorClass" label="学科分类" width="180" />
        </el-table>
      </div>
      <div class="right">
        <el-pagination
          v-model:current-page="paramCollege.page"
          :default-page-size="paramCollege.pageSize"
          :total="totalCollege"
          @current-change="getCollegeList"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import unicodeToChinese from '@/utils/unicodeToChinese.js';
import {
  searchSchool,
  // searchMajor
} from '@/api/appv2/appv1.js';
import {
  getSchoolSubjectEvaluate2Api,
  getSelectMajorApi,
} from '@/modules/rankings/api.js';
import { computed, ref } from 'vue';
import { throttle } from 'lodash';
import subjectTree from './subjectTree.vue';
import bus from '@/utils/bus.js';
const radioType = ref('1'); //1按学科2按院校
const extType = ref('4'); //第几轮
const radioTypeComputed = computed(() => radioType.value == 1);
const extTypeArr = [
  {
    label: '第四轮',
    extTypeId: '4',
  },
  {
    label: '第三轮',
    extTypeId: '3',
  },
  {
    label: '第二轮',
    extTypeId: '2',
  },
  {
    label: '第一轮',
    extTypeId: '1',
  },
];

// 学科搜索
const searchValMajor = ref('');
// 学科搜索输入值改变
const searchKeyMajor = ref(''); //记录上一次的输入值
const searchKeyArrMajor = ref([]); //记录上一次接口返回的结果

const getSubjectConfigs = ref([]); // 左侧树形结构数据
bus.on('getSubjectConfigs', (val) => {
  getSubjectConfigs.value = val;
});
const searchKeyInputMajor = throttle((val, cb) => {
  //输入值没变时就用上一次接口的结果
  if (searchKeyMajor.value && searchKeyMajor.value == val) {
    cb(searchKeyArrMajor.value);
    return;
  }
  if (val.length >= 2) {
    // searchMajor({
    //   search: val,
    //   level: 2,
    // }).then((res) => {
    //   searchKeyMajor.value = val;
    //   searchKeyArrMajor.value = res.data;
    //   cb(res.data);
    // });
    var a = [];
    for (const v of getSubjectConfigs.value) {
      for (const vv of v.majors) {
        if (vv.name.includes(val)) {
          a.push(vv);
          searchKeyMajor.value = val;
          searchKeyArrMajor.value = vv;
        }
      }
    }
    cb(a);
  } else {
    cb([]);
  }
}, 800);
const currentNodeKey = ref('');
const onClickSearchItemMajor = (e) => {
  paramSubject.value.page = 1;
  paramSubject.value.majorCode = e.code;
  currentNodeKey.value = e.code;
  getSelectMajor();
};
const subjectData = ref([]);
const paramSubject = ref({
  pageSize: 20,
  page: 1,
  extTypeId: extType.value,
});
const totalSubject = ref(0);
//学科查询分页
const getSubjectList = (e) => {
  paramCollege.value.page = e;
  getSelectMajor();
};
//学科树点击事件
const parentFun = (code) => {
  paramSubject.value.page = 1;
  paramSubject.value.majorCode = code;
  getSelectMajor();
};
//按学科查询
const getSelectMajor = () => {
  getSelectMajorApi(paramSubject.value).then((res) => {
    res.data.data.forEach((e) => {
      e.address = unicodeToChinese(e.address);
      e.features = unicodeToChinese(e.features);
    });
    subjectData.value = res.data.data;
    totalSubject.value = Number(res.data.total);
  });
};

// 院校搜索
const searchValCollege = ref('');
// 院校搜索输入值改变
const searchKeyCollege = ref(''); //记录上一次的输入值
const searchKeyArrCollege = ref([]); //记录上一次接口返回的结果
const searchKeyInputCollege = throttle((val, cb) => {
  //输入值没变时就用上一次接口的结果
  if (searchKeyCollege.value && searchKeyCollege.value == val) {
    cb(searchKeyArrCollege.value);
    return;
  }
  if (val.length >= 2) {
    searchSchool({
      search: val,
      pageSize: 1000,
      studentId: localStorage.getItem('student_id'),
    }).then((res) => {
      searchKeyCollege.value = val;
      searchKeyArrCollege.value = res.data;
      cb(res.data);
    });
  } else {
    cb([]);
  }
}, 800);
const collegeData = ref({});
const paramCollege = ref({
  pageSize: 10,
  page: 1,
  extTypeId: extType.value,
});
const onClickSearchItemCollege = (e) => {
  paramCollege.value.page = 1;
  paramCollege.value.search = e.cnName;
  getSchoolSubjectEvaluate2();
};
//按院校查询
const getSchoolSubjectEvaluate2 = () => {
  collegeData.value = {};
  getSchoolSubjectEvaluate2Api(paramCollege.value).then((res) => {
    collegeData.value = res.data.data;
    totalCollege.value = Number(res.data.total);
  });
};
//院校查询分页
const totalCollege = ref(0);
const getCollegeList = (e) => {
  paramCollege.value.page = e;
  getSchoolSubjectEvaluate2();
};

//学科院校切换，第几轮切换和搜索按钮
const searchFun = () => {
  if (radioType.value == 1) {
    paramSubject.value.extTypeId = extType.value;
    getSelectMajor();
  } else {
    paramCollege.value.extTypeId = extType.value;
    paramCollege.value.search = searchValCollege.value;
    getSchoolSubjectEvaluate2();
  }
};

// getSchoolSubjectEvaluate2();
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  :deep(.el-radio__inner) {
    display: none;
  }
}
.body {
  .college {
    margin-bottom: 15px;
    .collegeName {
      color: #86909c;
      font-size: 14px;
      padding-bottom: 15px;
    }
  }
  .subjectClass {
    display: flex;
    .tableClass {
      height: fit-content;
      margin-left: 10px;
      flex: 1;
      .features {
        font-size: 12px;
        color: #bcc3cc;
        span {
          margin-right: 5px;
        }
      }
    }
  }
}
</style>
